Web Development Redux Toolkit এর জন্য AsyncThunk গাইড ও নোট

Redux Toolkit-এ createAsyncThunk একটি খুবই শক্তিশালী ফিচার যা অ্যাসিনক্রোনাস একশন তৈরি করতে সাহায্য করে। এটি সাধারণত API কল, ডেটা ফেচিং, অথবা অন্য কোন অ্যাসিনক্রোনাস কাজের জন্য ব্যবহার করা হয়। createAsyncThunk অ্যাসিনক্রোনাস কার্যক্রমের জন্য সিম্পল এবং রিডাবল কৌশল প্রদান করে, এবং এটি Redux স্টেটে সুনির্দিষ্ট ভাবে পেন্ডিং, ফুলফিলড এবং রিজেক্টেড স্টেট ম্যানেজ করতে সাহায্য করে।

createAsyncThunk এর উপকারিতা:

1. অ্যাসিনক্রোনাস কাজ সহজে পরিচালনা: API কল বা অন্য অ্যাসিনক্রোনাস কাজগুলোর জন্য কোড কমপ্লেক্সিটি কমায়।
2. স্টেট ম্যানেজমেন্ট: অ্যাসিনক্রোনাস একশনের প্রতিটি স্টেজ (পেন্ডিং, ফুলফিলড, রিজেক্টেড) স্বয়ংক্রিয়ভাবে স্টেটে ট্র্যাক করা হয়।
3. পুনঃব্যবহারযোগ্যতা: অ্যাসিনক্রোনাস কাজগুলোকে আরও রিডেবল এবং সিকোয়েন্সেবল করা হয়।

createAsyncThunk এর মৌলিক গঠন

createAsyncThunk একটি ফাংশন যা তিনটি মূল অংশ নিয়ে কাজ করে:

1. এ্যাকশন টাইপ (Action type): এই একশনটি একটি স্ট্রিং টাইপ হিসেবে দেওয়া হয় যা অ্যাকশন নামের মতো ব্যবহার হয়।
2. এ্যাসিনক্রোনাস কনফিগারেশন (Async function): এই ফাংশনটি একশনটি ডিসপ্যাচ করার সময় চালু হয়। সাধারণত এখানে একটি API কল বা অন্য কোন অ্যাসিনক্রোনাস কার্যক্রম থাকে।
3. বিকল্প (Optional config): কিছু কনফিগারেশন দেয়া যায় যা অ্যাকশন স্টেটের পূর্ণাঙ্গ কন্ট্রোল প্রদান করে (যেমন, meta ডেটা, rejectWithValue ব্যবহার ইত্যাদি)।

createAsyncThunk এর উদাহরণ

ধরা যাক, আমাদের একটি অ্যাপ্লিকেশন আছে যেখানে একজন ব্যবহারকারীর তথ্য API থেকে ফেচ করতে হবে। এই কাজটি createAsyncThunk দিয়ে করা যাবে।

১. Redux Toolkit ইনস্টল করা

প্রথমে, Redux Toolkit ইনস্টল করা প্রয়োজন:

npm install @reduxjs/toolkit react-redux

২. createAsyncThunk ব্যবহার করে অ্যাসিনক্রোনাস একশন তৈরি করা

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// API কল করার জন্য createAsyncThunk
export const fetchUserData = createAsyncThunk(
  'user/fetchData', // একশন টাইপ
  async (userId, { rejectWithValue }) => {
    try {
      const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
      if (!response.ok) {
        throw new Error('Failed to fetch user data');
      }
      return await response.json();
    } catch (error) {
      return rejectWithValue(error.message);
    }
  }
);

// Slice তৈরি করা
const userSlice = createSlice({
  name: 'user',
  initialState: {
    data: null,
    status: 'idle', // 'idle', 'loading', 'succeeded', 'failed'
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserData.pending, (state) => {
        state.status = 'loading'; // যখন API কল চলছে
      })
      .addCase(fetchUserData.fulfilled, (state, action) => {
        state.status = 'succeeded'; // API কল সফল হলে
        state.data = action.payload; // API থেকে পাওয়া ডেটা
      })
      .addCase(fetchUserData.rejected, (state, action) => {
        state.status = 'failed'; // API কল ব্যর্থ হলে
        state.error = action.payload; // ত্রুটির বার্তা
      });
  }
});

export default userSlice.reducer;

এখানে:

• createAsyncThunk ফাংশনটি অ্যাসিনক্রোনাস একশন তৈরি করেছে। এটি fetchUserData নামে একশনটি তৈরি করে, যা userId প্যারামিটার গ্রহণ করে এবং API থেকে ডেটা ফেচ করে।
• extraReducers ব্যবহার করে আমরা pending, fulfilled, এবং rejected স্টেটগুলি ম্যানেজ করেছি।

৩. স্টোরে fetchUserData একশন সংযুক্ত করা

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';

const store = configureStore({
  reducer: {
    user: userReducer
  }
});

export default store;

এখানে userSlice.reducer Redux স্টোরে যুক্ত করা হয়েছে।

৪. React কম্পোনেন্টে createAsyncThunk ব্যবহার করা

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUserData } from './userSlice';

const UserProfile = ({ userId }) => {
  const dispatch = useDispatch();
  const user = useSelector((state) => state.user.data);
  const status = useSelector((state) => state.user.status);
  const error = useSelector((state) => state.user.error);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchUserData(userId)); // Dispatching the async action
    }
  }, [status, dispatch, userId]);

  let content;

  if (status === 'loading') {
    content = <div>Loading...</div>;
  } else if (status === 'succeeded') {
    content = <div>User: {user.name}</div>;
  } else if (status === 'failed') {
    content = <div>Error: {error}</div>;
  }

  return <div>{content}</div>;
};

export default UserProfile;

এখানে:

• UserProfile কম্পোনেন্টে, আমরা useDispatch এবং useSelector হুক ব্যবহার করে স্টোর থেকে স্টেট নিয়েছি।
• useEffect ব্যবহার করে যখন কম্পোনেন্টটি লোড হয়, তখন API কল করার জন্য dispatch(fetchUserData(userId)) ডাকা হয়।

createAsyncThunk এর অন্যান্য ফিচার

1. rejectWithValue ব্যবহার করা:
   যদি আপনি অ্যাসিনক্রোনাস কাজের মধ্যে কাস্টম ত্রুটি ম্যানেজ করতে চান, তবে rejectWithValue ব্যবহার করতে পারেন।

const fetchUserData = createAsyncThunk(
  'user/fetchData',
  async (userId, { rejectWithValue }) => {
    try {
      const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
      if (!response.ok) {
        throw new Error('User not found');
      }
      return await response.json();
    } catch (error) {
      return rejectWithValue(error.message); // Reject with custom error message
    }
  }
);

2. meta ডেটা:
   আপনি meta ডেটা দিয়ে অ্যাকশন সম্পর্কে অতিরিক্ত তথ্য যোগ করতে পারেন, যা রিডিউসারে ব্যবহৃত হতে পারে।

const fetchUserData = createAsyncThunk(
  'user/fetchData',
  async (userId, { getState, requestId, rejectWithValue }) => {
    // Using getState() or requestId for custom logic
  }
);

সারাংশ

Redux Toolkit-এর createAsyncThunk ফাংশনটি অ্যাসিনক্রোনাস কার্যক্রমের জন্য অত্যন্ত উপকারী। এটি API কল বা অন্য অ্যাসিনক্রোনাস কাজগুলোকে সহজ এবং সুসংগঠিতভাবে পরিচালনা করতে সাহায্য করে। createAsyncThunk স্টেটের পেন্ডিং, ফুলফিলড, এবং রিজেক্টেড স্টেট স্বয়ংক্রিয়ভাবে ট্র্যাক করে, যা অ্যাসিনক্রোনাস কাজের জন্য খুবই কার্যকর। এটি Redux অ্যাপ্লিকেশনকে আরও রিডেবল, স্কেলেবল এবং কার্যকরী করে তোলে।